import React, { Component } from 'react'
import ReactDOM from 'react-dom'

// export default class index extends Component {
//     state = { count: 0 }
//     add = () => {
//         const { count } = this.state
//         this.setState({ count: count + 1 }, () => {
//             console.log('count-回调', this.state.count);
//         })
//     }

//     componentDidMount(){
//         console.log('初始化');
//     }

//     render() {
//         return (
//             <div>
//                 <h1>当前求和为：{this.state.count}</h1>
//                 <button onClick={this.add}>点击加一</button>
//             </div>
//         )
//     }
// }

// 初始执行一次，每次调用都会执行
function HookFun() {
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState('抽烟')

    // 加的回调
    function add() {
        setCount(count + 1)  // 写法一
        // setCount(count => count + 1)  // 写法二
    }
    // 加的回调
    function hobby() {
        setName('喝酒')
    }
    // 卸载定时器回调
    function unmount(){
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }


    // 相当于componentDidMount，页面初始化
    // React.useEffect(() => {
    //     console.log('componentDidMount');
    // }, [])
    // 相当于componentDidUpdate，监听name的改变
    // React.useEffect(() => {
    //     console.log('componentDidUpdate');
    // }, [name])
    // 相当于componentDidMount，卸载
    React.useEffect(() => {
        let timer = setInterval(() => {
            // setCount(count + 1)
            setCount(count => count+1)
            // console.log('卸载。。。');
        }, 1000)
        return () => clearInterval(timer)
    }, [])


    const myRef = React.useRef()
    function show(){
        console.log('myRef',myRef.current.value);
        alert(myRef.current.value)
    }

    return (
        <div>
            <input type="text" ref={myRef} />
            <h1>当前求和为：{count}</h1>
            <h1>爱好：{name}</h1>
            <button onClick={add}>点击加一</button>
            <button onClick={hobby}>点击改名</button>
            <button onClick={unmount}>卸载定时器回调</button>
            <button onClick={show}>点击提示输入框数据</button>
        </div>
    )
}
export default HookFun
